<template>
  <div class="type-nav">
    <div class="container" @mouseleave="onhaddin">
      <h2 class="all" @mouseenter="downhidden" @mouseleave="onhaddintop">全部商品分类</h2>
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
     <transition name="animate__animated"  enter-active-class="animate__fadeIn">
      <div class="sort"    @mouseenter="listdownhidden" v-show='hidden||tophiddin'>
        <div class="all-sort-list2">
          <div class="item" v-for="datas,index in data" :key="datas.categoryId" @click.prevent="dosearch" @mouseenter="heightlight(index)" :class='{light:index === thisIndex && doHeight}' @mouseleave="leveHight">
            <h3>
              <a href="" :data-cate='datas.categoryName' :data-one='datas.categoryId'>{{datas.categoryName}}</a>
            </h3>
            <div class="item-list clearfix" :style="{display:index === thisIndex && doHeight ? 'block' : 'none'}">
              <div class="subitem">
                <dl class="fore" v-for ="child of datas.categoryChild" :key="child.categoryId">
                  <dt>
                    <a href="" :data-cate='child.categoryName' :data-two='child.categoryId'>{{child.categoryName}}</a>
                  
                  </dt>
                  <dd>
                    <em v-for='childs in child.categoryChild' :key="childs.categoryId">
                      <a href="" :data-cate='childs.categoryName' :data-three='childs.categoryId'>{{childs.categoryName}}</a>
                    </em>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    </div>
  </div>
</template>

<script>
import 'animate.css'
import {mapState,mapActions} from "vuex"
// import _ from  'lodash'//把loadsh所有功能引入 体机过大 最好是按需加载
import {debounce} from 'lodash';//因为是默认暴露 所以不用加

export default {
    data(){
      return{
        thisIndex:'',
        doHeight:false,
        hidden:true,
        tophiddin:true,
      }
    },
    name:'TypeNav',
    computed:{
      ...mapState('home',['data']),
    
    },
    methods:{

      downhidden(){
        if(this.haddion){
            this.tophiddin = true

          
        }
      },
      onhaddintop(){
        if(this.haddion){
          this.tophiddin = false
        }
      },
      onhaddin(){
        if(this.haddion){
          this.hidden = false
        }
      },
      listdownhidden(){
        if(this.haddion){
          this.hidden = true
        }
      },
      ...mapActions('home',['list']),
      ...mapActions('search',['seatch']),
      heightlight:debounce(function(e){
        this.thisIndex = e
        this.doHeight = true
      }
      ,50),
      leveHight(){
        this.doHeight = false
      },
      dosearch(e){
        let {one,two,three} = e.target.dataset;
        let query = {
          categoryName:e.target.dataset.cate,
        }
        if(one){  
          query.category1Id = one
        }else if(two){
          query.category2Id = two
        }else if(three) {
          query.category3Id = three
        }
        if(e.target.dataset.cate && e.target.localName === "a"){//节点拥有自定义属性dataset 和 localName 是a标签才可以运行
          this.$router.push({
            name:'search',
            query,params:{
              keyword:this.$route.params.keyword || undefined
            }
        })
        }
      }
    },
    props:['haddion'],
    mounted(){

      if(this.haddion){
        this.hidden = false;
        this.tophiddin = false;
      }
    }
};
</script>

<style lang ='less' scope>
.light{
  background-color: red;
}
  .type-nav {
        border-bottom: 2px solid #e1251b;
        .container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            position: relative;
            .all {
                width: 210px;
                height: 45px;
                background-color: #e1251b;
                line-height: 45px;
                text-align: center;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }
            .nav {
                a {
                    height: 45px;
                    margin: 0 22px;
                    line-height: 45px;
                    font-size: 16px;
                    color: #333;
                }
            }
            .sort {
                position: absolute;
                left: 0;
                top: 45px;
                width: 210px;
                height: 461px;
                position: absolute;
                background: #fafafa;
                z-index: 999;
                .all-sort-list2 {
                    .item {
                        h3 {
                            line-height: 30px;
                            font-size: 14px;
                            font-weight: 400;
                            overflow: hidden;
                            padding: 0 20px;
                            margin: 0;
                            a {
                                color: #333;
                            }
                        }
                        .item-list {
                          height: 461px;
                            position: absolute;
                            width: 734px;
                            min-height: 460px;
                            background: #f7f7f7;
                            left: 210px;
                            border: 1px solid #ddd;
                            top: 0;
                            z-index: 9999 !important;
                            overflow: auto;
                            .subitem {
                                float: left;
                                width: 650px;
                                padding: 0 4px 0 8px;
                                dl {
                                    border-top: 1px solid #eee;
                                    padding: 6px 0;
                                    overflow: hidden;
                                    zoom: 1;
                                    &.fore {
                                        border-top: 0;
                                    }
                                    dt {
                                        float: left;
                                        width: 54px;
                                        line-height: 22px;
                                        text-align: right;
                                        padding: 3px 6px 0 0;
                                        font-weight: 700;
                                    }
                                    dd {
                                        float: left;
                                        width: 415px;
                                        padding: 3px 0 0;
                                        overflow: hidden;
                                        em {
                                            float: left;
                                            height: 14px;
                                            line-height: 14px;
                                            padding: 0 8px;
                                            margin-top: 5px;
                                            border-left: 1px solid #ccc;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

</style>